<template>
  <div class="message">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <div class="title">系统消息</div>
        </div>
        <el-button type="primary" @click.native="add">添加</el-button>
      </div>
      <div class="bottom">
        <table-list :list="list" @deleteItem="deleteItem" />
      </div>
    </div>
    <Add ref="add" @confirm="handelConfirm" />
    <Pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="curPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import TableList from './tableList'
import Add from './add'
import { getMessageList, sendMessage } from '@/api/message'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    TableList,
    Add,
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      page: 1,
      total: 0,
      pageSize: 0,
      curPage: 0
    }
  },
  mounted() {
    this._getMessageList({ page: this.page })
  },
  methods: {
    deleteItem(id) {
      const fIndex = this.list.findIndex((item, index) => {
        return item.id === id
      })
      if (fIndex >= 0) {
        this.list.splice(fIndex, 1)
      }
    },
    handleNextPage(page) {
      this.page = page
      this.curPage = page
      this._getMessageList({ page: this.page })
    },
    add() {
      this.$refs.add.show()
    },
    handelConfirm(params) {
      this.page = 1
      this._sendMessage(params)
        .then(() => {
          this._getMessageList({ page: this.page })
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getMessageList({ page }) {
      getMessageList({ page })
        .then(res => {
          if (res.code === ERR_OK) {
            // console.log(res)
            // const arr = []
            // const temp = res.data.data
            // for (let i = 0; i < temp.length; i++) {
            //   if (temp[i].is_recall) continue
            //   arr.push(temp[i])
            // }
            this.list = res.data.data
            this.total = res.data.total
            this.pageSize = parseInt(res.data.per_page)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _sendMessage({ status, title, center }) {
      return new Promise((resolve, reject) => {
        sendMessage({ status, title, center })
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this._success(res)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _success(res) {
      this.$message({
        showClose: true,
        message: res.message,
        type: 'success'
      })
    }

  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
.message {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 110vh;
  .content{
  }
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
</style>
